<template>
  <div>
    <!-- <BreakSpace label="维修项目列表" :containerStyle="{ marginBottom: '10px' }" /> -->
    <FilterTable
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'records'"
      :fetchapi="fetchApi"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      selectionType="single"
      :isSelectColumn="false"
      height="auto"
    >
    </FilterTable>
  </div>
</template>
<script>
  import {  getBgList }  from '@/api/claim/dealer/ClaimApplication/index';

export default {
  // mixins: [dictionary],
  props: ['claimId'],
  data() {
    return {
      dataList: [],
      dataList1: [],
      visible: false,
      visibleDrawer: false,
      collapse: false,
      infoId: null,
      // topFilterInit: this.topFilterInitFun(),
      flterValue: {}, //参数
      columns: this.creatHeader(),
      columns1: this.creatHeader1(),
      fetchApi: getBgList,
      fetchParams: {
        claimId : this.claimId
      }, //ipa 接口
      selectedRows: [], //选中经销商
      formList: this.createFormList(),
      formList1: this.createFormList1(),
      saveData: null,
      activeName: '',
      menus: [
        {
          title: '审核记录',
          path: 'tabs/user',
          params: {
            type: 1
          }
        },
        {
          title: '维修历史',
          path: 'tabs/setting',
          disabled: true,
          params: {
            type: 2
          }
        }
      ]
    };
  },
  created() {

  },
  methods: {
    formChangeHandle(val) {
      console.log(val);
      this.saveData = val;
    },
    //搜索获取数据
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
      console.log(val);
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      console.log(this.selectedRows);
    },
    //保存
    saveDialog() {
      this.$refs.formPanel1.SUBMIT_FORM();
      if (this.saveData) {
        this.$emit('save', this.selectedRows);
      }
    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    chooseOrderNo() {
      this.visible = true;
    },
    add() {},
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '搜索',
          fieldName: 'title',
          placeholder: '请输入标题名称...',
          rules: [{ required: true, message: '请输入标题名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
          readonly: true // 只读
        },
        {
          type: 'SELECT',
          label: '所属分类',
          fieldName: 'cid',
          placeholder: '所属分类',
          itemList: [{ text: '热点', value: '1' }, { text: '资讯', value: '2' }],
          rules: [{ required: true, message: '请选择所属分类', trigger: 'change' }],
          disabled: true // 禁用
        },
        {
          type: 'DATE',
          label: '日期',
          fieldName: 'date',
          placeholder: '选择日期',
          rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'RANGE_DATE',
          label: '日期区间',
          style: { minWidth: '200px' },
          fieldName: 'startTime|endTime'
        },
        {
          type: 'MULTIPLE_SELECT',
          label: '兴趣爱好',
          fieldName: 'hobby',
          placeholder: '兴趣爱好',
          itemList: [{ text: '篮球', value: '1' }, { text: '足球', value: '2' }, { text: '乒乓球', value: '3' }],
          rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }]
        },
        {
          type: 'INPUT_NUMBER',
          label: '数量',
          fieldName: 'number',
          placeholder: '请输入数量...',
          initialValue: undefined,
          rules: [{ required: true, message: '请输入数量', trigger: 'blur' }]
        }
      ];
    },
    createFormList1() {
      return [
        {
          type: 'INPUT',
          label: '索赔类型',
          fieldName: 'title',
          placeholder: '请输入标题名称...',
          rules: [{ required: true, message: '请输入标题名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
          readonly: true // 只读
        },
        {
          type: 'SELECT',
          label: '所属分类',
          fieldName: 'cid',
          placeholder: '所属分类',
          itemList: [{ text: '热点', value: '1' }, { text: '资讯', value: '2' }],
          rules: [{ required: true, message: '请选择所属分类', trigger: 'change' }],
          disabled: true // 禁用
        },
        {
          type: 'DATE',
          label: '日期',
          fieldName: 'date',
          placeholder: '选择日期',
          rules: [{ required: true, message: '请选择日期', trigger: 'change' }]
        },
        {
          type: 'TEXT_AREA',
          label: '故障现象',
          fieldName: 'hobby',
          placeholder: '故障现象',
          rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
          rows: 3,
          selfCols: 3 // 元素占据几行
        },
        {
          type: 'TEXT_AREA',
          label: '故障原因',
          fieldName: 'hobby',
          placeholder: '故障原因',
          rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
          rows: 3,
          selfCols: 3 // 元素占据几行
        },
        {
          type: 'TEXT_AREA',
          label: '维修方案',
          fieldName: 'hobby',
          placeholder: '维修方案',
          rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
          rows: 3,
          selfCols: 3 // 元素占据几行
        },
        {
          type: 'UPLOAD_IMG',
          label: 'VIN',
          fieldName: 'wayPicture',
          placeholder: '上传身份证...',
          rules: [{ required: true, message: '请上传身份证', trigger: 'change' }, { limit: 1, validator: this.validateFn, message: '请上传1张图片', trigger: 'change' }],
          upload: {
            actionUrl: '/api/file/oss/upload',
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true
          }
        },
        {
          type: 'UPLOAD_IMG',
          label: '里程（仪表）',
          fieldName: 'wayPicture1',
          placeholder: '上传身份证...',
          rules: [{ required: true, message: '请上传身份证', trigger: 'change' }, { limit: 1, validator: this.validateFn, message: '请上传1张图片', trigger: 'change' }],
          upload: {
            actionUrl: '/api/file/oss/upload',
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true
          }
        }
      ];
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        { title: '索赔单号', dataIndex: 'claimNo', sorter: true },
        { title: '变更前记录', dataIndex: 'oldContent', sorter: true },
        { title: '变更后记录', dataIndex: 'newContent', sorter: true },
        { title: '修改日期', dataIndex: 'createdAt', sorter: true },
        { title: '备注', dataIndex: 'remarks', sorter: true }
      ];
    },
    //table表头和数据源
    creatHeader1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        // {
        //   title: '操作',
        //   dataIndex: 'column-action',
        //   width: 100,
        //   render: props => {
        //     return (
        //       <div style="text-align:center">
        //         <multiuse-button type="primary" icon="el-icon-delete" circle />
        //       </div>
        //     );
        //   }
        // },
        { title: '索赔单号', dataIndex: 'claimNo', sorter: true },
        { title: '变更上记录', dataIndex: 'oldContent', sorter: true },
        { title: '变更后记录', dataIndex: 'newContent', sorter: true },
        { title: '修改日期', dataIndex: 'createdAt', sorter: true },
        { title: '备注', dataIndex: 'remarks', sorter: true }
      ];
    }
  }
};
</script>

<style lang="less" scoped></style>
